import 'package:dailoz/generated/l10n.dart';
import 'package:dailoz/service/analyze_service/analyze_service.dart';
import 'package:dailoz/size_config.dart';
import 'package:dailoz/view_model/analyze_page_view_model.dart';
import 'package:dailoz/widgets/progress_widget.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class AnalyzePage extends StatefulWidget {
  const AnalyzePage({Key? key}) : super(key: key);

  @override
  State<AnalyzePage> createState() => _AnalyzePageState();
}

class _AnalyzePageState extends State<AnalyzePage> {
  final AnalyzePageViewModel _analyzePageViewModel = AnalyzePageViewModel();

  init() async {
    await _analyzePageViewModel.fetchTypeAnalyze();
    await _analyzePageViewModel.fetchTypeDay(0);
    await _analyzePageViewModel.fetchTaskTotalTimePerDay();
    await _analyzePageViewModel.fetchTag();
  }

  Future<void> refresh() async {
    await init();
  }

  @override
  void initState() {
    super.initState();
    init();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<AnalyzePageViewModel>(
      create: (_) => _analyzePageViewModel,
      child: Consumer<AnalyzePageViewModel>(
        builder: (context, provider, _) {
          return ProgressWidget(
            loading: provider.isLoading,
            msg: S.of(context).isLoading,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.only(
                        top: SizeConfig.getProportionateScreenHeight(60.0),
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "Analyze",
                            style: TextStyle(
                              fontSize:
                                  SizeConfig.getProportionateFontSize(20.0),
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ],
                      ),
                    ),
                    RefreshIndicator(
                      onRefresh: refresh,
                      child: SizedBox(
                        height: SizeConfig.getProportionateScreenHeight(648.0),
                        child: SingleChildScrollView(
                          child: Column(
                            children: <Widget>[
                              Padding(
                                padding: EdgeInsets.only(
                                  top: SizeConfig.getProportionateScreenHeight(
                                      20.0),
                                ),
                                child: Stack(
                                  children: [
                                    SizedBox(
                                      height: SizeConfig
                                          .getProportionateScreenHeight(324.0),
                                      width: SizeConfig
                                          .getProportionateScreenWidth(340.0),
                                      child: Card(
                                        elevation: 5,
                                        shape: const RoundedRectangleBorder(
                                          side: BorderSide(
                                            color: Color(0xffE2E9FF),
                                          ),
                                          borderRadius: BorderRadius.all(
                                            Radius.circular(10.0),
                                          ),
                                        ),
                                        color:
                                            Theme.of(context).backgroundColor,
                                        child: Row(
                                          children: <Widget>[
                                            const SizedBox(
                                              height: 18,
                                            ),
                                            Expanded(
                                              child: AspectRatio(
                                                aspectRatio: 1,
                                                child: Center(
                                                  child:
                                                      AnalyzeService.validate(
                                                              provider.tagList)
                                                          ? Text(
                                                              S
                                                                  .of(context)
                                                                  .noData,
                                                            )
                                                          : PieChart(
                                                              AnalyzeService
                                                                  .mainTagPieChart(
                                                                      provider),
                                                            ),
                                                ),
                                              ),
                                            )
                                          ],
                                        ),
                                      ),
                                    ),
                                    Positioned(
                                      top: SizeConfig
                                          .getProportionateScreenHeight(15.0),
                                      left: SizeConfig
                                          .getProportionateScreenWidth(20.0),
                                      child: Text(
                                        S.of(context).tags,
                                        style: TextStyle(
                                          fontSize: SizeConfig
                                              .getProportionateFontSize(24.0),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(
                                  top: SizeConfig.getProportionateScreenHeight(
                                      20.0),
                                ),
                                child: Stack(
                                  children: [
                                    Card(
                                      elevation: 5,
                                      shape: const RoundedRectangleBorder(
                                        borderRadius: BorderRadius.all(
                                          Radius.circular(16.0),
                                        ),
                                      ),
                                      child: Container(
                                        decoration: BoxDecoration(
                                          color:
                                              Theme.of(context).backgroundColor,
                                          borderRadius: const BorderRadius.all(
                                            Radius.circular(16.0),
                                          ),
                                          border: Border.all(
                                            color: const Color(0xffE2E9FF),
                                          ),
                                        ),
                                        padding: EdgeInsets.only(
                                          left: SizeConfig
                                              .getProportionateScreenWidth(
                                                  30.0),
                                          bottom: SizeConfig
                                              .getProportionateScreenHeight(
                                                  10.0),
                                          right: SizeConfig
                                              .getProportionateScreenWidth(
                                                  30.0),
                                          top: SizeConfig
                                              .getProportionateScreenHeight(
                                                  80.0),
                                        ),
                                        height: SizeConfig
                                            .getProportionateScreenHeight(
                                                330.0),
                                        width: SizeConfig
                                            .getProportionateScreenWidth(340.0),
                                        child: provider.taskList.isEmpty
                                            ? Center(
                                                child: Text(
                                                  S.of(context).noData,
                                                ),
                                              )
                                            : LineChart(
                                                AnalyzeService.mainData(
                                                  provider.taskList,
                                                  provider.isCurved,
                                                  provider.lineIsShow,
                                                  provider.gradientColors,
                                                ),
                                              ),
                                      ),
                                    ),
                                    Positioned(
                                      top: SizeConfig
                                          .getProportionateScreenHeight(15.0),
                                      left: SizeConfig
                                          .getProportionateScreenWidth(15.0),
                                      child: Row(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Padding(
                                            padding: const EdgeInsets.only(
                                                left: 5.0),
                                            child: Column(
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                Text(
                                                  S.of(context).type,
                                                  style: TextStyle(
                                                    fontSize: SizeConfig
                                                        .getProportionateFontSize(
                                                            24.0),
                                                  ),
                                                ),
                                                SizedBox(
                                                  height: SizeConfig
                                                      .getProportionateScreenHeight(
                                                          10.0),
                                                ),
                                                Text(
                                                  "Task PerMonth",
                                                  style: TextStyle(
                                                    color:
                                                        const Color(0xff8586A9),
                                                    fontSize: SizeConfig
                                                        .getProportionateFontSize(
                                                            14.0),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                          Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.end,
                                            children: <Widget>[
                                              Padding(
                                                padding: EdgeInsets.only(
                                                  top: SizeConfig
                                                      .getProportionateScreenHeight(
                                                          8.0),
                                                  left: SizeConfig
                                                      .getProportionateScreenWidth(
                                                          8.0),
                                                ),
                                                child: Row(
                                                  children: <Widget>[
                                                    GestureDetector(
                                                      onTap: () {
                                                        provider
                                                            .changeLineIsShow(
                                                          0,
                                                          !provider
                                                              .lineIsShow[0],
                                                        );
                                                      },
                                                      child: Row(
                                                        children: <Widget>[
                                                          const CircleAvatar(
                                                            backgroundColor:
                                                                Color(
                                                                    0xff23b6e6),
                                                            radius: 7.0,
                                                          ),
                                                          SizedBox(
                                                            width: SizeConfig
                                                                .getProportionateScreenWidth(
                                                              5.0,
                                                            ),
                                                          ),
                                                          Text(
                                                            "Normal",
                                                            style: TextStyle(
                                                              fontSize: SizeConfig
                                                                  .getProportionateFontSize(
                                                                14.0,
                                                              ),
                                                              color: const Color(
                                                                  0xff23b6e6),
                                                            ),
                                                          )
                                                        ],
                                                      ),
                                                    ),
                                                    SizedBox(
                                                      width: SizeConfig
                                                          .getProportionateScreenWidth(
                                                              20.0),
                                                    ),
                                                    GestureDetector(
                                                      onTap: () {
                                                        provider.changeLineIsShow(
                                                            1,
                                                            !provider
                                                                .lineIsShow[1]);
                                                      },
                                                      child: Row(
                                                        children: <Widget>[
                                                          const CircleAvatar(
                                                            backgroundColor:
                                                                Color(
                                                                    0xff02d39a),
                                                            radius: 7.0,
                                                          ),
                                                          SizedBox(
                                                            width: SizeConfig
                                                                .getProportionateScreenWidth(
                                                              5.0,
                                                            ),
                                                          ),
                                                          Text(
                                                            "Urgent",
                                                            style: TextStyle(
                                                              fontSize: SizeConfig
                                                                  .getProportionateFontSize(
                                                                14.0,
                                                              ),
                                                              color: const Color(
                                                                  0xff02d39a),
                                                            ),
                                                          )
                                                        ],
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ),
                                              Row(
                                                children: <Widget>[
                                                  TextButton(
                                                    onPressed: () {
                                                      provider.changeIsCurved(
                                                          false);
                                                    },
                                                    child: Text(
                                                      S.of(context).straight,
                                                      style: TextStyle(
                                                        color: provider.isCurved
                                                            ? Colors.grey
                                                            : Colors.red,
                                                      ),
                                                    ),
                                                  ),
                                                  TextButton(
                                                    onPressed: () {
                                                      provider
                                                          .changeIsCurved(true);
                                                    },
                                                    child: Text(
                                                      S.of(context).sleek,
                                                      style: TextStyle(
                                                        color: provider.isCurved
                                                            ? Colors.red
                                                            : Colors.grey,
                                                      ),
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ],
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              SizedBox(
                                height: SizeConfig.getProportionateScreenHeight(
                                    40.0),
                              ),
                            ],
                          ),
                        ),
                      ),
                    )
                  ],
                )
              ],
            ),
          );
        },
      ),
    );
  }
}
